<template>
	<view>
		<u-navbar :is-back="true" :back-icon-color="vuex_titleColor" :title="title" :title-color="vuex_titleColor" :background="vuex_navBackground"></u-navbar>
		<view class="content">
			<view class="listBox">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>时间过滤器</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">初始值(s)：{{currentTimes}}</view>
					<view class="list">日期(yyyy-MM-dd hh:mm:ss)：{{currentTimes | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
					<view class="list">日期(yyyy-MM-dd hh:mm)：{{currentTimes | dateFormat('yyyy-MM-dd hh:mm')}}</view>
					<view class="list">日期(yyyy-MM-dd)：{{currentTimes | dateFormat}}</view>
					<view class="list">日期(yyyy-MM)：{{currentTimes | dateFormat('yyyy-MM')}}</view>
					<view class="list">日期(yyyy)：{{currentTimes | dateFormat('yyyy')}}</view>
					<view class="list">日期(MM-dd)：{{currentTimes | dateFormat('MM-dd')}}</view>
					<view class="list">日期(hh:mm)：{{currentTimes | dateFormat('hh:mm')}}</view>
				</view>
			</view>
			<view class="listBox mT20">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>空数据过滤器</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">初始值(空)：{{emptyText}}</view>
					<view class="list">默认：{{emptyText | noData}}</view>
					<view class="list">自定义：{{emptyText | noData('想怎么写就怎么写')}}</view>
				</view>
			</view>

			<view class="listBox mT20">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>文本截取过滤器</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">初始值：{{defaultText}}</view>
					<view class="list">显示6位：{{defaultText | cutText}}</view>
				</view>
			</view>

			<view class="listBox mT20">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>元素是否存在数组中</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">数组一：{{arrOne}}</view>
					<view class="list">数组二：{{arrTwo}}</view>
					<view class="list">初始值一：{{idFlagOne}}</view>
					<view class="list">初始值一是否存在数组一中：{{idFlagOne |isThereArray(arrOne)}}</view>
					<view class="list">初始值一是否存在数组二中：{{idFlagOne |isThereArray(arrTwo,2) }}</view>
					<view class="list">初始值二：{{idFlagTwo}}</view>
					<view class="list">初始值二是否存在数组一中：{{idFlagTwo |isThereArray(arrOne)}}</view>
					<view class="list">初始值二是否存在数组二中：{{idFlagTwo |isThereArray(arrTwo,2)}}</view>
				</view>
			</view>

			<view class="listBox mT20">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>元素在数组中对应的值</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">数组一：{{arrTwo}}</view>
					<view class="list">数组二：{{arrThree}}</view>
					<view class="list">初始值一：{{idFlagOne}}</view>
					<view class="list">初始值一在数组一中的值：{{idFlagOne |findArr(arrTwo)}}</view>
					<view class="list">初始值一在数组二中的值：{{idFlagOne |findArr(arrThree,'label','value') }}</view>
				</view>
			</view>

			<view class="listBox mT20">
				<view class="tip-content">
					<text class="tip-line tip-line-left"></text>
					<view class="tip-text">
						<text>各种脱敏过滤器</text>
					</view>
					<text class="tip-line tip-line-right"></text>
				</view>
				<view>
					<view class="list">身份证号：{{IDCard}}</view>
					<view class="list">身份证判断男女：{{IDCard | sexIdcardFilter}}</view>
					<view class="list">身份证脱敏：{{IDCard | IDcardHide}}</view>

					<view class="list">手机号：{{userPhone}}</view>
					<view class="list">手机号脱敏：{{userPhone | telHide}}</view>

					<view class="list">姓名：{{userName}}</view>
					<view class="list">姓名脱敏：{{userName | nameHide}}</view>

					<view class="list">银行卡：{{bankCard}}</view>
					<view class="list">银行卡脱敏：{{bankCard | bankCardHide}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTimes: new Date().getTime() / 1000,
				emptyText: '',
				defaultText: '眼泪只代表软弱，生活只相信实力！',
				idFlagOne: 2,
				idFlagTwo: 6,
				arrOne: [1, 2, 3, 4],
				arrTwo: [{
						id: 1,
						name: '爱尚丽明一'
					},
					{
						id: 2,
						name: '爱尚丽明二'
					},
					{
						id: 3,
						name: '爱尚丽明三'
					},
					{
						id: 4,
						name: '爱尚丽明四'
					}
				],
				arrThree: [{
						label: 1,
						value: '爱尚丽明一value'
					},
					{
						label: 2,
						value: '爱尚丽明二value'
					},
					{
						label: 3,
						value: '爱尚丽明三value'
					},
					{
						label: 4,
						value: '爱尚丽明四value'
					}
				],
				IDCard: '411121199101011101',
				userName: '爱尚丽明',
				userPhone: '18888888888',
				bankCard: '6211111111111111111'
			}
		},
		computed: {
			title() {
				return '过滤器的使用'
			}
		},
		onLoad() {
			console.log(JSON.parse("[{\"type\":1,\"price\":\"600\"}]"));
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		box-shadow: 0px 6rpx 12rpx 0px rgba(225, 236, 252, 1);
		font-size: 24rpx;
		color: #666;

		.title {
			padding: 20rpx;
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
		}

		.list {
			padding: 15rpx 40rpx;
		}
	}

	.tip-content {
		padding: 20rpx;
		font-size: 32rpx;
		text-align: center;
		color: #000;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;

		.tip-text {
			margin: 0 12rpx;
		}

		.tip-line {
			width: 146rpx;
			height: 4rpx;
		}

		.tip-line.tip-line-left {
			background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#6834FC));
			background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #6834FC);
		}

		.tip-line.tip-line-right {
			background: -webkit-gradient(linear, left top, right top, from(#6834FC), to(hsla(0, 0%, 100%, 0)));
			background: linear-gradient(90deg, #6834FC, hsla(0, 0%, 100%, 0));
		}
	}

	.mT20 {
		margin-top: 20rpx;
	}
</style>